<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:filters-offset-01-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-filters-offset-01-b.html">Full version</a>, <a href="basic-filters-offset-01-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/filters.html#feOffset">15.21 Filter primitive 'feOffset'</a></p>
 <p>
				<a href="basic-filters-image-01-b.html">filters-image-01-b ←</a> 
				<a href="basic-index.html">index</a>
				<a href="basic-filters-tile-01-b.html">→ filters-tile-01-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>filters-offset-01-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=160 height=120>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/filters-offset-01-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=160 height=120 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/filters-offset-01-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of filters-offset-01-b" src="../png/basic-filters-offset-01-b.png" width="160" height="120"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
         <p>
           The target crosshairs should align with
           lower left bounds of the associated circle.
           The color of each crosshair should match
           the associated circle.
         </p>
         <p>
Verify the basic capability to handle the feOffset, feMerge and
feFlood filter nodes.  Four copies of a filled circle should appear at
various offsets and colors.  For each circle a reference crosshair is
drawn at the lower left of the circle to indicate the expected color,
opacity and position for the filtered element.  The targets are drawn
with the standard svg path element.
         </p>
         <p>
The rendered image should match the reference image. Additionally, the
target crosshairs should match the color, lower left corner, and
opacity of each copy of the filtered circle.
         </p>
         <p>
In addition to feFlood, feMerge, and feOffset, this test uses
'feComposite' to recolor the SourceGraphic with the feFlood color.
The source graphic uses 'circle'. The target cross hairs are drawn
with 'path' and use 'fill' and 'fill-opacity'.
         </p>

		</div>
<div class="linkbar"> <p>
				<a href="basic-filters-image-01-b.html">filters-image-01-b ←</a>
				<a href="basic-index.html">index</a>
				<a href="basic-filters-tile-01-b.html">→ filters-tile-01-b</a>
						</p></div>
</body>
</html>
